<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>访问管理 - 网址推荐</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">


</head>
  
<body>
<div class="lyear-layout-web" id="vue">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
       
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="/"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
			  <li class="nav-item" v-for="(item,index) in menus"> <a :href="item.href"><i :class="item.icon"></i> {{item.name}}</a> </li>
          </ul>
        </nav>
        
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 访问管理 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
                <span>笔下光年 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="backend_selfLogin.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
			
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                <div class="toolbar-btn-action">
				  
				  <button class="btn btn-primary m-r-5" @click="toWebVisit()">
				  <i class="mdi mdi-plus">页面访问记录</i>
				  </button>
				  
                  <button class="btn btn-primary m-r-5" @click="toApiVisit()">
				  <i class="mdi mdi-plus">接口访问记录</i>
				  </button>
				  
				  <button class="btn btn-primary m-r-5" @click="toAbnormal()">
				  <i class="mdi mdi-plus">异常访问记录</i>
				  </button>
				  
				  <button class="btn btn-primary m-r-5" @click="toUrlVisit()">
				  <i class="mdi mdi-plus">网址访问记录</i>
				  </button>
				  
                </div>
				
				
				  <div class="input-group">
				    <input type="text" class="form-control"  placeholder="IP地址" @keydown.enter="checkByAddr" v-model="query.addr">
				  </div>
				  <button class="btn btn-primary m-r-5" @click="clear()">
				  <i class="mdi mdi-plus">清空</i>
				  </button>
				  <button class="btn btn-primary m-r-5" @click="clickDelAll()">
				  <i class="mdi mdi-plus">删除</i>
				  </button>
				  <button class="btn btn-primary m-r-5" @click="clickClean()">
					  <i class="mdi mdi-plus">清除</i>
				  </button>
				
              </div>
			  
			
			  
              <div class="card-body">

                <div class="table-responsive">
					
					
				  <div class="btn btn-success">{{operateType}}</div>
				  
                  <table class="table table-bordered" v-if="operateType=='页面访问记录'">
                    <thead>
                      <tr>
                        <th>IP地址</th>
                        <th>访问时间</th>
                        <th>前台/后台</th>
                        <th>user-Agent</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in list">
                        <td>{{item.addr}}</td>
                        <td>{{item.createtime}}</td>
                        <td>{{item.source}}</td>
                        <td>{{item.useragent}}</td>
                        <td>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
							  <a class="btn btn-xs btn-default" @click="clickDisable(item)" title="加入异常" data-toggle="tooltip"><i class="mdi mdi-comment-remove-outline"></i></a>
						  </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
				  
				  <table class="table table-bordered" v-if="operateType=='接口访问记录'">
				    <thead>
				      <tr>
				        <th>IP地址</th>
				        <th>访问时间</th>
				        <th>接口内容</th>
				        <th>user-Agent</th>
				        <th>操作</th>
				      </tr>
				    </thead>
				    <tbody>
				      <tr v-for="(item,index) in list">
				        <td>{{item.addr}}</td>
				        <td>{{item.createtime}}</td>
				        <td>{{item.apiname}}</td>
				        <td>{{item.useragent}}</td>
				        <td>
				          <div class="btn-group">
				            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
							<a class="btn btn-xs btn-default" @click="clickDisable(item)" title="加入异常" data-toggle="tooltip"><i class="mdi mdi-comment-remove-outline"></i></a>
				          </div>
				        </td>
				      </tr>
				    </tbody>
				  </table>
				  
				  <table class="table table-bordered" v-if="operateType=='异常访问记录'">
				    <thead>
				      <tr>
				        <th>IP地址</th>
				        <th>访问时间</th>
				        <th>返回的信息</th>
				        <th>访问的内容</th>
				        <th>操作</th>
				      </tr>
				    </thead>
				    <tbody>
				      <tr v-for="(item,index) in list">
				        <td>{{item.addr}}</td>
				        <td>{{item.createtime}}</td>
				        <td>{{item.msg}}</td>
				        <td>{{item.uri}}</td>
				        <td>
				          <div class="btn-group">
				            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
							<a class="btn btn-xs btn-default" @click="clickDisable(item)" title="禁用" data-toggle="tooltip"><i class="mdi mdi-account-off"></i></a>
				          </div>
				        </td>
				      </tr>
				    </tbody>
				  </table>
				  
				  <table class="table table-bordered" v-if="operateType=='网址访问记录'">
				    <thead>
				      <tr>
				        <th>IP地址</th>
				        <th>访问时间</th>
				        <th>网址ID</th>
						<th>网址信息</th>
				        <th>操作</th>
				      </tr>
				    </thead>
				    <tbody>
				      <tr v-for="(item,index) in list">
				        <td>{{item.addr}}</td>
				        <td>{{item.createtime}}</td>
				        <td>{{item.urlid}}</td>
				        <td>{{item.websitename}}</td>
				        <td>
				          <div class="btn-group">
				            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
				          </div>
				        </td>
				      </tr>
				    </tbody>
				  </table>
				  
                </div>
				
              </div>
			  
			  <el-pagination
				@size-change="changeSize"
				@current-change="changePage"
				:current-page="param.page"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="param.total">
			  </el-pagination>
			  
			  
            </div>
          </div>
        </div>
		
      </div>
      
    </main>

    <!--End 页面主要内容-->
	
	
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--消息提示-->
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue_config.js"></script>
<script type="text/javascript" src="vue/axios.min.js"></script>
<script type="text/javascript" src="vue/vue_api.js"></script>
<script type="text/javascript" src="vue/commons.js"></script>
<link href="vue/element/index.css" rel="stylesheet">
<script type="text/javascript" src="vue/element/index.js"></script> 
<script type="text/javascript">
	

	
	new Vue({
		el: '#vue',
		data: {
			menus:[],
			active: 1,
			operateType: "页面访问记录",
			category: [],
			param: {
				page: 1,
				size: 10
			},//查询使用
			query: {
				addr:""
			},//添加修改使用的内容
			
			list: [],
			
			currentPage: 1,
			pageSizes: [100, 200, 300, 400],
		},
		created(){
			this.getMenusList();
			this.listVisit();
		},
		mounted(){
			
		},
		
		methods: {

			getMenusList(){
				var url = rootUrl+"sys/menus";
				fetchDataGet(url).then(res =>{
					this.menus=res.list;
				})
			},
			clear(){
				this.query.addr="";
				this.checkByAddr();
			},
			
			checkByAddr(){
				if(this.operateType=='页面访问记录'){
					this.listVisit();
				}
				if(this.operateType=='接口访问记录'){
					this.listApi();
				}
				if(this.operateType=='异常访问记录'){
					this.listAbnormal();
				}
				if(this.operateType=='网址访问记录'){
					this.listUrl();
				}
			},
			
			clickDelAll(){
				if(this.operateType=='页面访问记录'){
					this.delAll();
				}
				if(this.operateType=='接口访问记录'){
					this.delAllApi();
				}
				if(this.operateType=='异常访问记录'){
					//this.listAbnormal();
				}
				if(this.operateType=='网址访问记录'){
					//this.listUrl();
				}
			},

			clickClean(){
				this.cleanAbnormal();
			},
			changeSize(val){
				this.param.size = val;
				this.toPage();
			},
			changePage(val){
				this.param.page = val;
				this.toPage();
			},
			
			
			toPage(index){
			
				if(this.operateType=='页面访问记录'){
					this.listVisit();
				}
				if(this.operateType=='接口访问记录'){
					this.listApi();
				}
				if(this.operateType=='异常访问记录'){
					this.listAbnormal();
				}
				if(this.operateType=='网址访问记录'){
					this.listUrl();
				}
				
			},
			
			toWebVisit(){
				this.operateType="页面访问记录"
				this.param.page=1;
				this.param.size=10;
				this.active = 1;
				this.listVisit();
			},
			
			toApiVisit(){
				this.operateType="接口访问记录"
				this.param.page=1;
				this.param.size=10;
				this.active = 1;
				this.listApi();
			},
			
			toAbnormal(){
				this.operateType="异常访问记录"
				this.param.page=1;
				this.param.size=10;
				this.active = 1;
				this.listAbnormal();
			},
			
			toUrlVisit(){
				this.operateType="网址访问记录"
				this.param.page=1;
				this.param.size=10;
				this.active = 1;
				this.listUrl();
			},
			
			clickDel(row){
				if(this.operateType=='页面访问记录'){
					this.del(row);
				}
				if(this.operateType=='接口访问记录'){
					this.delApi(row);
				}
				if(this.operateType=='异常访问记录'){
					this.delAbnormal(row);
				}
				if(this.operateType=='网址访问记录'){
					this.delUrl(row);
				}
				//this.delWebsiteType(row)
			},
			
			clickDisable(row){
				if(this.operateType=='页面访问记录'){
					this.addAbnormal(row);
				}
				if(this.operateType=='接口访问记录'){
					this.addAbnormal(row);
				}
				if(this.operateType=='异常访问记录'){
					this.addDisable(row)
				}
				
			},
			
			
			listVisit(){
				var url = rootUrl+"visitor/list";
				fetchDataPostList(url,this.query,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			listApi(){
				var url = rootUrl+"visitor/listApi";
				fetchDataPostList(url,this.query,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			listAbnormal(){
				var url = rootUrl+"visitor/listAbnormal";
				fetchDataPostList(url,this.query,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			listUrl(){
				var url = rootUrl+"visitor/listUrl";
				fetchDataPostList(url,this.query,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			
			del(row){
				var url = rootUrl+"visitor/del";
				fetchDataPost(url,row).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listVisit();
					}else{
						danger(res.message);
					}
				})
			},
			
			delApi(row){
				var url = rootUrl+"visitor/delApi";
				fetchDataPost(url,row).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listApi();
					}else{
						danger(res.message);
					}
				})
			},
			
			delAbnormal(row){
				var url = rootUrl+"visitor/delAbnormal";
				fetchDataPost(url,row).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listAbnormal();
					}else{
						danger(res.message);
					}
				})
			},
			
			delUrl(row){
				var url = rootUrl+"visitor/delUrl";
				fetchDataPost(url,row).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listUrl();
					}else{
						danger(res.message);
					}
				})
			},
			
			//添加到异常访问
			addAbnormal(row){
				var url = rootUrl+"visitor/addAbnormal";
				fetchDataPost(url,{"addr":row.addr}).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listApi();
					}else{
						danger(res.message);
					}
				})
			},
			
			//添加到禁止访问
			addDisable(row){
				var url = rootUrl+"visitor/addDisable";
				fetchDataPost(url,{"addr":row.addr}).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listAbnormal();
					}else{
						danger(res.message);
					}
				})
			},
			
			delAll(){
				var url = rootUrl+"visitor/delAll";
				fetchDataPost(url,this.query).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listVisit();
					}else{
						danger(res.message);
					}
				})
			},
			
			delAllApi(){
				var url = rootUrl+"visitor/delAllApi";
				fetchDataPost(url,this.query).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listApi();
					}else{
						danger(res.message);
					}
				})
			},

			cleanAbnormal(){
				var url = rootUrl+"visitor/clean";
				fetchDataGet(url).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.toWebVisit();
					}else{
						danger(res.message);
					}
				})
			},
		},
	})
</script>
</body>
</html>